<script setup>
import { ref,onMounted } from 'vue'
import HomePanel from './HomePanel.vue'
import {reqHotAPI} from "@/api/home.js";
onMounted(() => getHotList())
const hotList = ref([])
const getHotList = async () => {
  const res = await reqHotAPI()
  hotList.value = res.data.result
}

</script>

<template>
  <div class="home-hot">
    <HomePanel title="人气推荐" sub-title="人气爆款 不容错过">
      <ul>
        <li v-for="item in hotList" :key="item.id">
          <router-link to="/">
            <img :src="item.picture" alt="商品图片"/>
            <p class="name">{{ item.title }}</p>
            <p class="desc">{{ item.alt }}</p>
          </router-link>
        </li>
      </ul>
    </HomePanel>
  </div>
</template>

<style scoped lang="scss">
.home-hot {
  display: flex;
  margin-top: 25px;

  ul {
    display: flex;
    flex-wrap: nowrap;
    margin-bottom: 20px;

    li {
      width: 305px;
      height: 405px;
      padding: 0  10px;
      text-align: center;
      background-color: #f0f9f4;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);

      &:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
      }
      a{
        img {
          margin-top: 10px;
          width: 300px;
          height: 300px;
        }
        .name {
          color: #2c2c2c;
          font-size: 20px;
          margin-top: 12px;
        }
        .desc {
          color: #999;
          font-size: 18px;
          margin-top: 10px;
        }
      }

    }
  }

}

</style>